<template>
  <el-menu class="el-menu-vertical-demo" :unique-opened="true">
    <el-submenu index="item.id+''" v-for="item of menulist" :key="item.id">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </template>
      <el-menu-item
        :index="subitem.id + ''"
        v-for="subitem of item.children"
        :key="subitem.id"
        @click="handlerRoute(subitem)"
      >
        <i :class="subitem.icon"></i>
        <span>{{ subitem.name }}</span>
      </el-menu-item>

        <!-- <el-menu-item > -->
          <!-- <router-link to="/Map">go </router-link> -->
      <!-- </el-menu-item> -->
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menulist: [],
    };
  },
  methods: {
    handlerRoute(subitem) {
      this.$router.push(subitem.href);
    },
  },
  //发送请求获取数据挂载到导航菜单中，需要将登录成功的用户名带的服务器
  mounted() {
    var id = sessionStorage.getItem('userId');
    this.$axios.get("/menus/" + id)
      .then((res) => {
        this.menulist = res.data.data; //响应回来的集合赋值给menulist
      })
      .catch((error) => {});
  },
};
</script>

<style>
</style>